<!--智慧消防V1.0-info页面-->
<template>
    <div class="app-container">
        <div style="text-align: center;margin-bottom: 30px">
            设备-《{{ equipmentInfo.name }}》-详情信息
        </div>
        <div style="margin: 10px auto;text-align: center">
            <el-button v-if="!this.equipmentInfo.drill" type="danger"
                       icon="el-icon-plus" class="filter-item" @click="logoDrill()">标识演练
            </el-button>
            <el-button v-else type="warning" icon="el-icon-edit" class="filter-item"
                       @click="endDirll()">结束演练
            </el-button>
            <el-button type="warning" icon="el-icon-edit" class="filter-item" @click="show=true">触发设备
            </el-button>
        </div>
        <el-dialog title="设备触发" :visible.sync="show">
            <el-form :model="triggerForm" ref="triggerForm" label-width="150px">
                <el-form-item label="模拟事件" prop="realStatus">
                    <el-select v-model="triggerForm.realStatus" placeholder="请选择设备触发事件" style="width: 100%">
                        <el-option v-for="(item,index) in equipmentStatusList" :key="index" :value="item.obj"
                                   :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <div align="center">
                    <el-button type="primary" @click="triggerEquipment">确定</el-button>
                </div>
            </el-form>
        </el-dialog>
        <div style="width: 50%;margin: 0 auto">
            <el-form :model="equipmentInfo" ref="equipmentInfo" label-width="100px">
                <el-form-item label="设备名称" prop="name">
                    {{ equipmentInfo.name }}
                </el-form-item>
                <el-form-item label="所属主体" prop="enterpriseName">
                    {{ equipmentInfo.enterpriseName }}
                </el-form-item>
                <el-form-item label="所属区域" prop="regionName">
                    {{ equipmentInfo.regionName }}
                </el-form-item>
                <el-form-item label="所属建筑" prop="buildName">
                    {{ equipmentInfo.buildName }}
                </el-form-item>
                <el-form-item label="楼层" prop="floor">
                    {{ equipmentInfo.floor }}
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    {{ equipmentInfo.address }}
                </el-form-item>
                <el-form-item label="实时状态" prop="realStatus">
                    {{ equipmentInfo.realStatus | equipmentOnlineStatus }}
                </el-form-item>
               <el-form-item label="二次码" prop="code">
                 {{ equipmentInfo.code}}
               </el-form-item>
                <el-form-item label="智能情况" prop="intellect">
                    {{ equipmentInfo.intellect == 0 ? "非智能" : "智能" }}
                </el-form-item>
            </el-form>
        </div>
        <template>
            <div class="app-container">
                <uc-table url="admin/inEquipmentFunctionData/getEquipmentFunctionDataPage" name="设备"
                          ref="equipmentTable" pageable table-border :search-form="searchForm">
                    <template slot="searchForm">
                        <el-form size="mini" :inline="true" :model="searchForm"
                                 class="demo-form-inline filter-container">
                        </el-form>
                    </template>
                    <template slot="columns">
                        <el-table-column prop="equipmentName" label="设备名称" align="left"></el-table-column>
                        <!--              <el-table-column prop="enterpriseName" label="企业名称" align="left" show-overflow-tooltip></el-table-column>-->
                        <el-table-column prop="reportTime" label="上报时间" align="left" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{ scope.row.reportTime | dateFormat }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="equipmentStatus" label="设备状态" align="left">
                            <template slot-scope="scope">
                                {{ scope.row.equipmentStatus| equipmentOnlineStatus }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="content" label="上报内容" align="left"></el-table-column>
                    </template>
                </uc-table>
            </div>
        </template>
    </div>

</template>

<script>
import { getInEquipmentVo,getEquipmentRealtimeValue,logoDrill,generateDirll,endDrill,triggerEqu} from "@/api/equipment";
import * as  echarts from  "echarts"
import {getInUserList} from "@/api/enterprise";
import {getInEnterpriseDominantList} from "@/api/enterpriseDominant";
import UcTable from "@/components/UcTable/index.vue";
export default {
    name: "info",
    components: {UcTable},
    data() {
        return {
            designeeList: [],
            designeeUserList: [],
            equipmentInfo: {},
            show:false,
            searchForm: {
                deleted: false,
                equipmentId: this.$route.params.ucId
            },
            deleteLoading: false,
            equipmentRealtimeValueList: {},
            enterpriseList: [],
            triggerForm:{},
            equipmentStatusList: [{
                obj: "00",
                name: '无事件',
            }, {
                obj: "01",
                name: '火警',
            }, {
                obj: "02",
                name: '故障',
            }, {
                obj: "03",
                name: '启动',
            }, {
                obj: "04",
                name: '停动',
            },{
                obj: "05",
                name: '隔离',
            },{
                obj: "06",
                name: '释放',
            },{
                obj: "07",
                name: '监管',
            },{
                obj: "08",
                name: '反馈',
            },{
                obj: "09",
                name: '动作',
            },{
                obj: "0A",
                name: '复位',
            },{
                obj: "0B",
                name: '恢复',
            }],

        }
    },
    created() {
        this.getInEquipmentVo()
        // this.getEquipmentRealtimeValue()
        this.getUserList()
        this.getInEnterpriseDominantList()
    },
    methods:{
        handleSearch(){
            this.$refs.equipmentTable.getTableData(1)
        },
        getInEquipmentVo(){
            getInEquipmentVo({ucId:this.$route.params.ucId}).then(res=>{
                this.equipmentInfo = res.data
                   this.hidden3=false
                this.triggerForm=res.data
                this.$notify.success({
                    title: '成功',
                    message: "获取设备信息成功"
                })
            }).catch(error=>{
                this.$notify.error({
                    title: '失败',
                    message: error.message
                })
            })
        },
        triggerEquipment(){
            triggerEqu(this.triggerForm).then(res => {
                this.$notify.success({
                    title: '成功',
                    message: "触发成功"
                })
                this.getInEquipmentVo(this.$route.params.ucId)

                this.show = false
                this.handleSearch()
            }).catch(res => {
                this.$notify.error({
                    title: '失败',
                    message: res.msg
                })
            })
        },
        getEquipmentRealtimeValue(){
            getEquipmentRealtimeValue({ucId:this.$route.params.ucId}).then(res=>{
                 console.log(res.data)
                this.$notify.success({
                    title: '成功',
                    message: "获取设备实时数据成功"
                })
            }).catch(error=>{
                this.$notify.error({
                    title: '失败',
                    message: error.message
                })
            })
        },
      getUserList(val) {
        getInUserList({deleted:false}).then(res => {
          this.designeeUserList = res.data
        }).catch(res => {
          this.hidden=false
          this.$notify.error({
            title: '失败',
            message: res.msg
          })
        })
      },
      getInUserList(val) {
        getInUserList({flagId:val,deleted:false}).then(res => {
          this.designeeList = res.data
        }).catch(res => {
          this.hidden=false
          this.$notify.error({
            title: '失败',
            message: res.msg
          })
        })
      },
      getInEnterpriseDominantList() {
        getInEnterpriseDominantList({dominantType:7,deleted:false}).then(res => {
          this.enterpriseList=res.data;
        }).catch(res => {
          this.$notify.error({
            title: '失败',
            message: res.msg
          })
        })
      },
        logoDrill(){
            logoDrill({ucId:this.$route.params.ucId}).then(res => {
                this.$notify.success({
                    title: '标识成功',
                    message: res.msg
                })
                this.getInEquipmentVo()
            })
        },
        generateDirll(){
            generateDirll({ucId:this.$route.params.ucId}).then(res => {
                this.$notify.success({
                    title: '开始演练',
                    message: res.msg
                })
                this.getInEquipmentVo()
            })
        },
        endDirll(){
            endDrill({ucId:this.$route.params.ucId}).then(res => {
                this.$notify.success({
                    title: '结束演练',
                    message: res.msg
                })
                this.getInEquipmentVo()
            })
        },
    },
   filters:{
       infoStatus(val){
           let status = "";
           switch (val){
               case 0:
                   status = "在线";
                   break;
               case 1:
                   status = "离线";
                   break;
               default:
                   break;
           }
           return status;
       }
   }

}
</script>

<style scoped>

.qiun-charts {
    width: 1300px;
    height: 260px;
}

</style>